<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
	layout:decorator="partial/layout" lang="zh">
<head>
<style type="text/css">
	text{
		cursor: pointer;
	}
</style>
</head>
<body>
	<div layout:fragment="main">
		<a target="_blank" href="https://github.com/MiracleTanC?tab=repositories">
			<img style="position: absolute; top: 56px; right: 0; border: 0;z-index: 999;" src="http://file.miaoleyan.com/forkme_right_red_aa0000.png" alt="Fork me on GitHub">
		</a>
		<!--banner begin-->
		<div class="picsbox">
			<el-carousel :interval="3000" arrow="always">
			    <el-carousel-item v-for="banner in bannerList" :key="banner.id">
		     		<a :href="banner.linkUrl">
					  <img :src="banner.imgSrc" alt="个人博客" data-bd-imgshare-binded="1"> 
					</a>
					<span class="imginfo">{{banner.title}}</span>
			    </el-carousel-item>
			  </el-carousel>
		</div>
		<div class="blank"></div>
		<!--blogsbox begin-->
		<div class="blogsbox">
			<template>
			<div class="blogs" v-for="item in articleList">
					<h3 class="blogtitle">
						<a :href="['/detail/'+item.id]" target="_blank" v-html="item.title">{{item.title}}</a>
					</h3>
					<span v-if="item.showStyle==1" class="blogpic">
						<a :href="['/detail/'+item.id]" :title="item.title">
							<img v-if="item.coverImageList&&item.coverImageList.length>0"  :src="item.coverImageList[0].coverImage" alt="">
						</a>
					</span>
					<span v-else-if="item.showStyle==2" class="bplist">
						<ul v-if="item.coverImageList&&item.coverImageList.length>0">
							<li v-for="img in item.coverImageList">
								<a :href="['/detail/'+item.id]" :title="item.title">
									<img :src="img.coverImage" alt="">
								</a>
							</li>
						</ul>
					</span>
					<span v-else-if="item.showStyle==3" class="bigpic">
						<a :href="['/detail/'+item.id]" :title="item.title" target="_blank">
							<img v-if="item.coverImageList&&item.coverImageList.length>0" :src="item.coverImageList[0].coverImage" alt="">
						</a>
					</span>
					<a :href="['/detail/'+item.id]" target="_blank"><p class="blogtext" v-html="item.abstractContent">{{item.abstractContent}}</p></a>
					<div class="bloginfo">
						<ul>
							<li>
								<a href="/" v-if="item.articleType">
									<span class="label label-warn">转载</span>
								</a>
								<a href="/" v-else>
									<span class="label label-success">原创</span>
								</a>
							</li>
							<li class="author"><a href="/">{{item.author}}</a></li>
							<li class="lmname"><a href="/">{{item.categoryName}}</a></li>
							<li class="timer">{{item.createTime}}</li>
							<li class="view"><span>{{item.showCount}}</span>已阅读</li>
							<!--<li class="like">9999</li>-->
						</ul>
					</div>
				</div>
			</template>
			<div class="loading" v-show="loading">
				<img th:src="@{/images/loading.gif}" alt="loading" />
			</div>
			<div v-show="!showMore" style="text-align: center;">这个人很懒,只写了这么多</div>
		</div>
		<!--blogsbox end-->
		<div class="sidebar">
			<div class="zhuanti">
				<h2 class="hometitle">特别推荐</h2>
				<ul v-if="recommendArticlelist">
					<li v-for="article in recommendArticlelist">
						<i v-if="article.coverImageList&&article.coverImageList.length>0">
							<img :src="article.coverImageList[0].coverImage">
						</i>
						<p>
							{{article.title}} <span><a :href="['/detail/'+article.id]" target="_blank">阅读</a></span>
						</p>
					</li>
					
				</ul>
			</div>
			<div class="tuijian">
				<h2 class="hometitle">推荐文章</h2>
				<ul class="sidenews" v-if="topReadArticlelist">
					<li v-for="article in topReadArticlelist">
						<i v-if="article.coverImageList&&article.coverImageList.length>0">
							<img :src="article.coverImageList[0].coverImage" >
						</i>
						<p>
							<a :href="['/detail/'+article.id]" target="_blank">{{article.title}} </a>
						</p> 
						<span class="action-icon action-icon-view">{{article.showCount}}</span>
						<span class="action-icon action-icon-time" style="display: inline-block;">{{article.createTime}}</span>
					</li>
					
				</ul>
			</div>
			<div class="cloud">
				<h2 class="hometitle">标签云</h2>
				<ul v-if="tagList" id="tagcontainer"></ul>
			</div>
			<div class="links">
				<h2 class="hometitle">友情链接</h2>
				<ul v-if="partnerList">
					<li v-for="partner in partnerList"><a :href="partner.siteUrl" :alt="partner.siteDesc" target="_blank">{{partner.siteName}}</a></li>
				</ul>
			</div>
			<!-- 设置固定关注我们 -->
			<div th:include="partial/focus::focus"></div>
		</div>
	</div>
	<div layout:fragment="js">
		<script src="https://d3js.org/d3.v3.min.js"></script>
		<script src="https://cdn.bootcss.com/d3-cloud/1.2.5/d3.layout.cloud.min.js"></script>
		<script type="text/javascript">
    var initData=function() {
    	var _this=this;
    	// 开始加载数据，就不能再次触发这个函数了
    	_this.scrollDisable = true;
    	_this.loading=true;
        var param = this.queryForm;
       // debugger;
        $.ajax({
            type: "POST",
            url: "/getArticlelist",
            //url: "/getEsArticlelist",//启用es时用这个
            data: param,
            success: function (result) {
                if (result.code==0) {
                    _this.loading=false;
                	//var resultCount=result.data.recordList.length;//启用es时用这个
                	var resultCount=result.data.rows.length;
                	if(resultCount>0){
                        //_this.articleList = _this.articleList.concat(result.data.recordList);//启用es时用这个
                        _this.articleList = _this.articleList.concat(result.data.rows);
                        _this.scrollReveal.sync();
                	}
                	_this.showMore=resultCount==_this.queryForm.pageSize?true:false;
                }
                // 插入数据完成后   
                _this.scrollDisable = false;
            }
        });
       
    }
    var getTopReadArticleList=function() {
    	var _this=this;
        $.ajax({
            type: "POST",
            url: "/getTopReadArticleList",
            data: {},
            success: function (result) {
                if (result.code==0) {
                	var resultCount=result.data.length;
                	if(resultCount>0){
                		_this.topReadArticlelist=result.data;
                	}
                }
            }
        });
       
    }
    var getRecommendArticleList=function() {
    	var _this=this;
        $.ajax({
            type: "POST",
            url: "/getRecommendArticlelist",
            data: {},
            success: function (result) {
                if (result.code==0) {
                	var resultCount=result.data.length;
                	if(resultCount>0){
                		_this.recommendArticlelist=result.data;
                	}
                }
            }
        });
       
    }
    var initTagList=function(){
    	var _this=this;
    	$.ajax({
            type: "POST",
            url: "/getTaglist",
            data: {},
            success: function (result) {
                if (result.code==0) {
                	var resultCount=result.data.length;
                	if(resultCount>0){
                		_this.tagList=result.data;
                		_this.initd3cloud(result.data);
                	}
                }
            }
        });
	}
    var initScrollRevealOption=function(){
    	this.scrollReveal.reveal('.blogs', {
     	        duration: 500,//动画的时长
     	        delay:200,//延迟时间
     	        origin: 'bottom',//动画开始的位置，'bottom', 'left', 'top', 'right'
     	        reset:true,//回滚的时候是否再次触发动画
     	        mobile: false,//在移动端是否使用动画
     	        distance:'10px',//滚动的距离，单位可以用%，rem等
     	        opacity:0.001,//其他可用的动画效果
     	        easing:'linear',
     	        scale: 1
     	    });
    }
    var initBanner=function(){
    	var _this=this;
    	 $.ajax({
             type: "POST",
             url: "/getBannerlist",
             data: {},
             success: function (result) {
                 if (result.code==0) {
                 	var resultCount=result.data.rows.length;
                 	if(resultCount>0){
                 		_this.bannerList=result.data.rows;
                 	}
                 }
             }
         });
    }
    var initPartner=function(){
    	var _this=this;
    	 $.ajax({
             type: "POST",
             url: "/getPartnerlist",
             data: {},
             success: function (result) {
                 if (result.code==0) {
                 	var resultCount=result.data.length;
                 	if(resultCount>0){
                 		_this.partnerList=result.data;
                 	}
                 }
             }
         });
    }
    var app = new Vue({
    	  el: '#app',
    	  data: {
    		queryForm:{
    			pageIndex: 1,
         	    pageSize: 10,
         	    title:'',
				tag:''
    		},
    		showMore:true,
    		loading:true,
    	    articleList:[],
    	    topReadArticlelist:[],
    	    recommendArticlelist:[],
    	    bannerList:[],
    	    scrollReveal:ScrollReveal(),
    	    scrollDisable :false,
    	    scrollTop:0,
    	    defaultfollowUsPosition:0,
    	    followUsPosition:0,
    	    partnerList:[],
    	    tagList:[]
    	  },
    	  mounted() {
    		   // 缓存指针  
              var _this = this;
              _this.defaultfollowUsPosition=this.$refs.followUs.offsetTop;
              _this.initScrollRevealOption();
              // 注册scroll事件并监听  
		      window.addEventListener('scroll', ()=> {
        		var scrollTop = document.documentElement.scrollTop;
                _this.scrollTop=scrollTop;
        		 if(scrollTop + window.innerHeight >= document.body.clientHeight) {
                	if(!_this.scrollDisable) {
                		if(_this.showMore){
  	                  	  _this.initData();
  	                  	  //_this.initScrollRevealOption();
  	                  	  _this.queryForm.pageIndex=_this.queryForm.pageIndex+1;
  	                 }
                	}
		        }
        		 //console.log(_this.queryForm.pageIndex);
        		 var followUsPosition = this.$refs.followUs.offsetTop;
        		 _this.defaultfollowUsPosition=followUsPosition;
        		 if(scrollTop<=_this.defaultfollowUsPosition ){
         			 _this.followUsPosition=_this.defaultfollowUsPosition;
         		 }
		      });

    	  },
    	  created(){
    		  this.initData(); 
    		  this.initBanner();
    		  this.getRecommendArticleList();
    		  this.getTopReadArticleList();
    		  this.initPartner();
    		  this.initTagList();
    		  this.queryForm.pageIndex=this.queryForm.pageIndex+1;  
    	  },
   	 	  methods:{
    	      initd3cloud(data){
                  var _this=this;
                  //var fill = d3.scale.category20();
                  var formatData=data.map(function(d) {
                      return {"text": d.value, "size": 10 + Math.random() * 50,"color":d.color};
                  });
                  d3.layout.cloud().size([325, 200]) //size([x,y])  词云显示的大小
                      .words(formatData)
                      .rotate(function() { return ~~(Math.random() * 2) * 90; })
                      .font("Impact")
                      .fontSize(function(d) { return d.size; })
                      .on("end", _this.draw)//结束时运行draw函数
                      .start();
			  },
              draw(words) {
    	          var _this=this;
				d3.select("#tagcontainer").append("svg")
					.attr("width", 345)
					.attr("height", 205)
					.append("g")
					.attr("transform", "translate(160,110)")
					.selectAll("text")
					.data(words)
					.enter().append("text")
					.style("font-size", function(d) { return d.size + "px"; })
					.style("font-family", "Impact")
					.style("fill", function(d, i) {
						return d.color;
					})
					.attr("text-anchor", "middle")
					.attr("transform", function(d) {
						return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
					})
					.text(function(d) { return d.text; })
					.on("click",function(d){
						var tag=d.text;
						_this.queryForm.tag=tag;
						_this.queryForm.pageIndex=1;
						_this.articleList=[];
						_this.initData();
						_this.backToTop();
					});
				},
			  initData:initData,
			  initScrollRevealOption:initScrollRevealOption,
			  initBanner:initBanner,
			  initPartner:initPartner,
			  initTagList:initTagList,
			  getTopReadArticleList:getTopReadArticleList,
			  getRecommendArticleList:getRecommendArticleList,
			  backToTop(){
                  timer = setInterval(function () {
                      var osTop = document.documentElement.scrollTop || document.body.scrollTop
                      var ispeed = Math.floor(-osTop / 5)
                      document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed
                      if (osTop === 0) {
                          clearInterval(timer);
                      }
                  },30)
			  },
			  tagClick(){

			  }
   	 	  }
    	})
    </script>
	</div>
</body>
</html>